#mainView {
  margin: 30px auto;
  width: 700px;
}
#jsonTextarea {
  width: 700px;
  height: 300px;
}
.red {
  color: red;
}

/* JSON VIEW */

/* striped background */
.jsonView {
  background-color: #f3f6fa;
  background-image: linear-gradient(
    rgba(255, 255, 255, 1) 50%,
    transparent 50%,
    transparent
  );
  background-size: 60px 60px;
  padding: 30px 0 0 3px;
  background-attachment: local;
}
/* inputs */
.jsonView select.form-control {
  margin: 0;
  padding: 0;
}
.jsonView select.form-control,
.jsonView input.form-control {
  width: 100px;
  display: inline;
  height: 29px;
  padding-left: 5px;
}
.jsonView input[type="text"] {
  margin: 0;
  border: 0;
  background: none;
}
.jsonView input[type="checkbox"] {
  position: absolute;
}
.jsonView input.keyinput {
  font-weight: bold;
}
.jsonView input {
  height: 30px;
  margin: 0;
  padding: 0;
}
.jsonView input[type="text"].addItemKeyInput,
.jsonView input[type="text"].addItemValueInput {
  border: 1px solid #ccc;
  background: white;
  margin-left: 0;
}
.jsonView .addItemKeyInput {
  font-weight: bold;
}

/* chevrons */
.jsonView .glyphicon-chevron-right,
.jsonView .glyphicon-chevron-down {
  float: left;
  cursor: pointer;
  position: relative;
  top: 7px;
  /*right: 22px;*/
  /*margin-right: -15px;*/
}
.jsonView > json > .glyphicon-chevron-down {
  display: none;
}
/* add and delete */
.jsonView .addObjectItemBtn {
  background-color: transparent;
  border-color: transparent;
  padding: 0;
  border: 0;
  height: 30px;
  display: block;
}
.jsonView .addObjectItemBtn i {
  display: block;
}
.jsonView .deleteKeyBtn,
.jsonView .moveArrayItemBtn {
  float: right;
  margin-right: 10px;
  position: relative;
  top: 7px;
  z-index: 99999999999999;
  cursor: pointer;
}
.jsonView .changeCheck {
  float: right;
  margin-right: 10px;
  position: relative !important;
  z-index: 99999999999999;
  cursor: pointer;
}

/* basic layout */
.jsonView .jsonObjectKey {
  font-weight: bold;
  margin-left: 15px;
}
.jsonContents {
  margin-left: 25px;
}
.jsonView .block {
  display: block;
}
.jsonView .jsonItemDesc {
  font-family: Georgia, serif;
  color: grey;
  font-style: italic;
  cursor: default;
  line-height: 30px;
  margin-left: 60px;
}
.jsonView .objectDesc {
  cursor: default;
}
/* first brace */
.jsonView > json > .jsonItemDesc {
  display: block;
  float: left;
  position: relative;
  bottom: 25px;
  height: 0;
  width: 0;
}

/* array numbering */
.jsonView ol.arrayOl {
  margin: 0;
  padding-left: 25px;
}
.jsonView ol.arrayOl > li > span > span > json > .glyphicon-chevron-down,
.jsonView ol.arrayOl > li > span > span > json > .glyphicon-chevron-right {
  left: -40px;
}
.jsonView ol.arrayOl li {
  color: grey;
  font-style: italic;
  font-family: Georgia, serif;
  list-style-type: decimal;
  min-height: 30px;
}
.jsonView ol.arrayOl li.arrayItem > span > span > .glyphicon-chevron-right,
.jsonView ol.arrayOl li.arrayItem > span > span > .glyphicon-chevron-down {
  right: 30px;
}
.jsonView ol.arrayOl li input,
.jsonView li select,
.jsonView li button {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
}
.jsonView ol.arrayOl li *:not(.btn):not(.jsonItemDesc) {
  color: black;
}

.jsonView li li {
  list-style-type: lower-roman;
}
.jsonView li li li {
  list-style-type: upper-roman;
}
.jsonView li li li li {
  list-style-type: lower-latin;
}
.jsonView li li li li li {
  list-style-type: upper-latin;
}
.jsonView li li li li li li {
  list-style-type: lower-greek;
}
.jsonView li li li li li li li {
  list-style-type: decimal;
}
.sortable-placeholder {
  height: 20px;
  display: block;
}
